<template>
  <div>
    <div class="clickItem">
      <span style="margin-right: 12px">
        <i class="el-icon-message" style="font-size: 30px;cursor:pointer;"></i>
      </span>
      <span style="margin-right: 12px">
        <el-popover
          placement="bottom"
          width="317"
          trigger="click">
              <div class="component-notice"></div>
                <el-tabs v-model="notificationActive" @tab-click="">
                  <el-tab-pane label="全部" name="first">
                    <div class="handle">
                      <div class="btn">
                        <i class="el-icon-check"></i>
                        一键标为已读
                      </div>
                      <div class="btn">
                        <i class="el-icon-view"></i>
                        查看全部
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="教学活动" name="second">
                    <div class="handle">
                      <div class="btn">
                        <i class="el-icon-check"></i>
                        一键标为已读
                      </div>
                      <div class="btn">
                        <i class="el-icon-view"></i>
                        查看全部
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="教务通知" name="third">
                    <div class="handle">
                      <div class="btn">
                        <i class="el-icon-check"></i>
                        一键标为已读
                      </div>
                      <div class="btn">
                        <i class="el-icon-view"></i>
                        查看全部
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="系统通知" name="fourth">
                    <div class="handle">
                      <div class="btn">
                        <i class="el-icon-check"></i>
                        一键标为已读
                      </div>
                      <div class="btn">
                        <i class="el-icon-view"></i>
                        查看全部
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              <i slot="reference" class="el-icon-bell" style="font-size: 30px; cursor:pointer;"></i>
            </el-popover>
      </span>
      <span style="margin-right: 12px">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <img v-if="headAddress != null" class="avatar" style="width: 40px;height: 40px;" :src="headAddress"
                 alt="">
            <img v-else class="avatar" style="width: 40px;height: 40px; vertical-align: text-bottom"
                 src="../../static/user/userImg.jpg" alt="userImg">
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="display: block">
              <i class="el-icon-thumb"></i>
              开通VIP
            </el-dropdown-item>
            <el-dropdown-item style="display: block">
              <i class="el-icon-link"></i>
              机构用户认证
            </el-dropdown-item>
            <el-dropdown-item style="display: block">
              <div @click="toUserSetting()">
                <i class="el-icon-setting"></i>
                个人设置
              </div>
            </el-dropdown-item>
            <el-dropdown-item style="display: block">
              <i class="el-icon-s-check"></i>
              学术存证
            </el-dropdown-item>
            <el-dropdown-item style="display: block">
              <div @click="logOut">
                <i class="el-icon-warning-outline"></i>
                退出账户
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
  </div>
</template>

<script>
import {mymessage} from "../tools/mymessage";

export default {
  name: "HeaderRight",
  data() {
    var checkphone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('教师工号不能为空'));
      } else {
        const reg = /^1[3456789]\d{9}$/; // 匹配电话号码

        // const reg = /^[A-Za-z0-9]+$/; // 匹配数字和26个字母
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的教师工号'));
        }
      }
    };
    return {
      notificationActive: 'first',
      headAddress: null,
      rules: {
        name: [
          {required: true, message: '请输入教师姓名', trigger: 'blur'}
        ],
        code: [
          // {required: true, message: '请输入教师工号', trigger: 'blur'}
          {validator: checkphone, trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    toUserSetting() {
      this.$router.push('/courseList/userSetting')
    },
    logOut() {
      console.log("logOut");
      this.$confirm('', '您确定要退出吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$store.commit('ACCOUNT_LOGOUT_FAILURE')
        mymessage.success("退出成功");
        this.$router.push('/')
        window.location.reload()
      }).catch(() => {
        // todo
      });
    },
    getHeaderAddress() {
      /*      let loginUser = store.getters.userInfo
            let employee = loginUser.loginEmployee;
            this.headAddress = employee.headAddress*/
    }
  },
  created() {
    this.getHeaderAddress()
  }
}
</script>

<style scoped>
.handle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #4285f4;
  line-height: 20px;
}

.handle .btn {
  cursor: pointer;
  width: 50%;
  height: 50px;
  line-height: 50px;
}

.clickItem {
  cursor: pointer;
}

.avatar {
  border-radius: 50%;
}
</style>
